<template>
    <div class="card-box">
        <el-row>
            <el-col :md="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="" class="mt_5">
                        <el-input v-model="formInline.user" placeholder="ICCID或手机号"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="selectCarrierName">
                        <i class="el-icon-search"></i>
                    </el-button>
                    <el-button type="primary" @click="getCarrierData">
                        <i class="el-icon-refresh"></i>
                    </el-button>
                    <el-button type="primary" @click="dialogVisible = true">事件刷选</el-button>
                </el-form>
                <el-dialog title="事件筛选" :visible.sync="dialogVisible" width="40%">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="ICCID或手机号：">
                            <el-input v-model="ruleForm.name" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="运营商类型：">
                            <el-select v-model="ruleForm.carrierType" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in carrierType" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="运营商：">
                            <el-select v-model="ruleForm.carrier" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in carrier" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="卡号归属：">
                            <el-select v-model="ruleForm.card" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in card" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="事件名称：">
                            <el-select v-model="ruleForm.shijian" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in shijian" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="事件状态：">
                            <el-select v-model="ruleForm.status" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="事件日期：">
                            <div class="block">
                                <el-date-picker
                                    v-model="ruleForm.value6"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                        <el-form-item label="操作人：">
                            <el-select v-model="ruleForm.caozuo" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in caozuo" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="selectCarrier">查询</el-button>
                    </span>
                </el-dialog>
            </el-col>
            <el-col :md="4" class="text-right">
                <el-popover placement="bottom" trigger="hover" title="筛选条件">
                    <el-menu>
                        <el-menu-item index="1">
                            <el-checkbox v-model="checked1">流水号</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <el-checkbox v-model="checked2">电信流水号</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <el-checkbox v-model="checked3">事件内容</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <el-checkbox v-model="checked4">失败原因</el-checkbox>
                        </el-menu-item>
                    </el-menu>
                    <span slot="reference">
                            <el-button type="primary">
                                <i class="iconfont icon-loudou"></i>
                            </el-button>
                        </span>
                </el-popover>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="iccid" label="ICCID" width="180">
            </el-table-column>
            <el-table-column prop="phone" label="联系人" width="160">
            </el-table-column>
            <el-table-column prop="carrier" label="运营商" width="160">
            </el-table-column>
            <el-table-column prop="liushuihao" label="流水号" width="220" v-if="checked1">
            </el-table-column>
            <el-table-column prop="dianxin" label="电信流水号" width="240" v-if="checked2">
            </el-table-column>
            <el-table-column prop="shijianName" label="事件名称" width="160">
            </el-table-column>
            <el-table-column prop="shijianContent" label="事件内容" width="160" v-if="checked3">
            </el-table-column>
            <el-table-column prop="start_time" label="计划开始时间" width="160">
            </el-table-column>
            <el-table-column prop="real_start_time" label="实际开始时间" width="160">
            </el-table-column>
            <el-table-column prop="real_end_time" label="实际完成时间" width="160">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="60">
            </el-table-column>
            <el-table-column prop="error_reason" label="失败原因" width="310" v-if="checked4">
            </el-table-column>
            <el-table-column prop="caozuoren" label="操作人">
            </el-table-column>
            <el-table-column prop="methods" label="操作" width="200">
            <template slot-scope="scope">
                <el-button size="mini" type="primary">重跑</el-button>
                <el-button size="mini" type="primary">强制成功</el-button>
            </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                formInline: {
                    user: ''
                },
                dialogVisible: false,
                ruleForm: {
                    name: '',
                    carrierType: '',
                    carrier: '',
                    card: '',
                    shijian: '',
                    status: '',
                    value6: '',
                    caozuo: ''
                },
                carrierType: [
                    {
                        value: '选线1',
                        label: '联通'
                    },
                    {
                        value: '选线2',
                        label: '电信'
                    }
                ],
                carrier: [
                    {
                        value: '选线1',
                        label: '联通'
                    },
                    {
                        value: '选线2',
                        label: '电信'
                    }
                ],
                card: [
                    {
                        value: '选线1',
                        label: '联通'
                    },
                    {
                        value: '选线2',
                        label: '电信'
                    }
                ],
                shijian: [
                    {
                        value: '选线1',
                        label: '联通'
                    },
                    {
                        value: '选线2',
                        label: '电信'
                    }
                ],
                status: [
                    {
                        value: '选线1',
                        label: '联通'
                    },
                    {
                        value: '选线2',
                        label: '电信'
                    }
                ],
                caozuo: [
                    {
                        value: '选线1',
                        label: '联通'
                    },
                    {
                        value: '选线2',
                        label: '电信'
                    }
                ],
                tableData: [
                    {
                        iccid: '8986031630200231594',
                        phone: '14916132189',
                        carrier: '上海电信',
                        liushuihao: '201807180058492861470877	',
                        dianxin: '1000000190201807136984319300',
                        shijianName: '设置断网',
                        shijianContent: '此 SIM 卡设置了断网',
                        start_time: '2018-07-17 02:00:12',
                        real_start_time: '2018-07-18 08:58:51',
                        real_end_time: '2018-07-18 08:58:52',
                        status: '成功',
                        error_reason: '1201 - -5：已经订购该产品，请不要重复订购',
                        caozuoren: '平台'
                    }
                ],
                checked1: false,
                checked2: false,
                checked3: false,
                checked4: false
            }
        }
    }
</script>

<style scoped lang="scss">
    .text-right {
        text-align: right;
    }

    .w100, .el-range-editor.el-input__inner {
        width: 100%;
    }
</style>